<template>
  <div class="app-container">


    <div>
      <div class="custom-icon-text">
        <el-button icon="el-icon-s-data" @click="resetQuery1" class="custom-button">总数<br><br>{{total}}</el-button>

        <div class="search-form">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item  prop="taskName">
              <el-input
                v-model="queryParams.taskName"
                placeholder="请输入任务名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">高级检索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置条件</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="add-box">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-circle-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['alarm:task:add']"
              >新增布控</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <br>

    <div>
      <h6 style="display: inline;">布防状态 :
        <el-button style="font-size: 10px" @click="getList">全部</el-button>
        <el-button style="font-size: 10px" @click="queryAllByTasksStatusIs0">未开始</el-button>
        <el-button style="font-size: 10px" @click="queryAllByTasksStatusIs1">执行中</el-button>
        <el-button style="font-size: 10px" @click="queryAllByTasksStatusIs2">已暂停</el-button>
        <el-button style="font-size: 10px" @click="queryAllByTasksStatusIs4">已结束</el-button>
        <el-button style="font-size: 10px" @click="queryAllByTasksStatusIs3">已撤控</el-button>
      </h6>
    </div>





    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="success"-->
    <!--          plain-->
    <!--          icon="el-icon-edit"-->
    <!--          size="mini"-->
    <!--          :disabled="single"-->
    <!--          @click="handleUpdate"-->
    <!--          v-hasPermi="['alarm:task:edit']"-->
    <!--        >修改</el-button>-->
    <!--      </el-col>-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="danger"-->
    <!--          plain-->
    <!--          icon="el-icon-delete"-->
    <!--          size="mini"-->
    <!--          :disabled="multiple"-->
    <!--          @click="handleDelete"-->
    <!--          v-hasPermi="['alarm:task:remove']"-->
    <!--        >删除</el-button>-->
    <!--      </el-col>-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="warning"-->
    <!--          plain-->
    <!--          icon="el-icon-download"-->
    <!--          size="mini"-->
    <!--          @click="handleExport"-->
    <!--          v-hasPermi="['alarm:task:export']"-->
    <!--        >导出</el-button>-->
    <!--      </el-col>-->
    <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    <!--    </el-row>-->

    <template>

      <div id="app">


        <p7>共<p7 style="font-size: 16px;color: #1ab394">{{total}}</p7>条信息</p7>
        <div class="card-container">
          <div class="card" v-for="(task, index) in taskList" :key="index">
            <div class="card-body">
              <div class="card-info" >
                <!--                <p><strong>序号:</strong> {{ task.id }}</p>-->
                <!--                任务名称:-->
                <h3><strong></strong> {{ task.taskName }}</h3>
                <p class="inline-field" style="font-size: 10px"><strong>布防人:</strong> {{ task.defenderId }}</p>
                <p class="inline-field" style="font-size: 10px">
                  <strong>布防状态:</strong>
                  {{ task.defenseStatus === 0 ? '未开始' :
                  task.defenseStatus === 1 ? '执行中' :
                    task.defenseStatus === 2 ? '已暂停' :
                      task.defenseStatus === 3 ? '已撤控' :
                        task.defenseStatus === 4 ? '已结束' :
                          task.defenseStatus === 5 ? '已过期' : '未知状态'
                  }}
                </p>
                <p style="font-size: 10px">
                  <div class="block">
                    <span style="font-size: 10px">
                       <strong>有效期限:</strong> <br>
                      {{task.creationTime}}至{{task.lastModified}}
                    </span>

                  </div>
                </p>



                <p style="font-size: 10px">
                  <strong>布控对象:</strong>
                  {{ task.targetObject === 0 ? '库布控' :
                  task.targetObject === 1 ? '人员布控' :
                    task.targetObject === 2 ? '实有人口布控' : '未知类型' }}
                </p>
                <p style="font-size: 10px"><strong>创建时间:</strong> {{ parseTime(task.creationTime, '{y}-{m}-{d}') }}</p>
              </div>
              <div class="card-footer">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-document"
                  @click="handleUpdate(task)"
                  v-hasPermi="['alarm:task:edit']"
                >详情</el-button>
                <el-button
                  v-if="task.defenseStatus === 1 || task.defenseStatus === 4"
                  size="mini"
                  type="text"
                  icon="el-icon-edit-outline"
                  @click="handleUpdate(task)"
                  v-hasPermi="['alarm:task:edit']"
                >编辑</el-button>
                <el-button
                  v-if="task.defenseStatus === 1"
                  size="mini"
                  type="text"
                  icon="el-icon-video-pause"
                  @click="handlePause(task.id)"
                  v-hasPermi="['alarm:task:edit']"
                >暂停</el-button>
                <el-button
                  v-if="task.defenseStatus === 2"
                  size="mini"
                  type="text"
                  icon="el-icon-video-pause"
                  @click="handleReStart(task.id)"
                  v-hasPermi="['alarm:task:edit']"
                >取消暂停(继续)</el-button>
                <el-button
                  v-if="task.defenseStatus !== 3 && task.defenseStatus !== 4 && task.defenseStatus !== 5"
                  size="mini"
                  type="text"
                  icon="el-icon-back"
                  @click="handleRemoteTask(task.id)"
                  v-hasPermi="['alarm:task:edit']"
                >撤控</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-message-solid"
                  @click="handleAlarm(task)"
                  v-hasPermi="['alarm:task:remove']"
                >告警</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-message-solid"
                  @click="handleDelete(task)"
                  v-hasPermi="['alarm:task:remove']"
                >删除</el-button>
                <el-button
                  v-if="task.defenseStatus === 0"
                  size="mini"
                  type="text"
                  icon="el-icon-message-solid"
                  @click="startTask(task.id)"
                  v-hasPermi="['alarm:task:remove']"
                >启动(开始执行布控任务)</el-button>
              </div>
            </div>

          </div>
        </div>
      </div>
    </template>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />



    <!--     添加或修改布控对话框-->
    <el-dialog :title="title" :visible.sync="open"  width="900px" :style="{ height: '600px' }" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form ref="form" :model="form" label-width="120px">
          <div class="flex-container">
            <el-form-item label="布防名称" prop="taskName" class="flex-item">
              <el-input v-model="form.taskName" placeholder="请输入布防名称" />
            </el-form-item>
            <el-form-item label="布控时间" class="flex-item">
              <div>
                <el-date-picker
                  v-model="form.creationTime"
                  type="datetime"
                  placeholder="选择开始日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  @change="handleStartDateChange"
                ></el-date-picker>
                <span>-</span>
                <el-date-picker
                  v-model="form.lastModified"
                  type="datetime"
                  placeholder="选择结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  @change="handleEndDateChange"
                ></el-date-picker>
              </div>
            </el-form-item>



          </div>
          <el-form-item label="布控对象" prop="targetObject">
            <el-radio-group v-model="form.targetObject">
              <el-radio :label="1" class="custom-radio">人员布控</el-radio>
              <el-radio :label="2" class="custom-radio" @change="handleRealPopulationChange">实有人口布控</el-radio>
              <el-radio :label="0" class="custom-radio">库布控</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 根据选中的值显示不同的内容 -->
          <div v-if="form.targetObject === 1">
            <h3>人员布控内容</h3>
            <div>
              <div class="photo-wall">
                <el-form-item label="人口图片上传" :label-width="formLabelWidth">
                  <ImageUpload v-model="form.pics" />
                  <!--                      <el-upload-->
                  <!--                        action="/dev-api/alarm/task/upload"-->
                  <!--                        list-type="picture-card"-->
                  <!--                        :on-preview="handlePictureCardPreview"-->
                  <!--                        :on-remove="handleRemove1"-->
                  <!--                        :on-success="handleSuccess1"-->
                  <!--                      >-->
                  <!--                        <i class="el-icon-plus"></i>-->
                  <!--                      </el-upload>-->
                  <!--                      <el-dialog :visible.sync="dialogVisible">-->
                  <!--                        <img width="100%" :src="dialogImageUrl" alt="">-->
                  <!--                      </el-dialog>-->
                </el-form-item>
                <!--        回显图片-->
                <img v-for="i in task.pics" :src="i" v-show="i!=null" height="100px" width="100px">

                <!-- 假设在某个时刻，你已经有了 uploadedImages 数组中的图片 URL -->
                <!-- 你可以使用计算属性或方法来更新 fileList -->

                <!-- 图片列表（仅用于展示，不用于上传） -->
                <!-- 照片墙 -->

                <!--                    假效果的-->
                <!--                    <div v-for="(url, index) in uploadedImages" :key="index" class="photo-item">-->
                <!--                      <img :src="url" alt="Uploaded Image" class="photo">-->
                <!--                    </div>-->
              </div>
            </div>
            <!-- 这里添加库布控的具体内容 -->
          </div>
          <div v-else-if="form.targetObject === 2">
            {{form}}
            <!-- 这里添加人员布控的具体内容 -->
            <div style="background-color: #dfe6ec;width: 150px;height: 150px;margin: 40px;padding: 10px;">
              <!--                  <h4><strong>实有人口数量:{{this.selectedResidents.length}}</strong></h4>-->
              <h4><strong>实有人口数量:1</strong></h4>
              <a @click="openDiaResidents" style="color: #2f54eb">查看更多</a>
            </div>

          </div>


          <div v-else-if="form.targetObject === 0">
            <h3>库布控内容</h3>
            <!-- 这里添加实有人口布控的具体内容 -->
            {{hello2}}
          </div>




          <el-form-item label="相似度 : " prop="similarity">
            <div>
              <el-slider v-model="form.similarity" :max="1.0" step="0.01"></el-slider>
            </div>
          </el-form-item>
        </el-form>




      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 对话框 -->
    <el-dialog
      title="实有人口选择"
      :visible.sync="dialogVisible1"
      width="1200px"
      style="height: 500px"
      @click="handleRealPopulationChange"
      @close="handleClose"
    >
      <template>
        <div id="app">
          <p7>共<p7 style="font-size: 16px;color: #1ab394">{{total}}</p7>条信息</p7>


          <div class="flex-container">
            <el-table
              v-loading="loading"
              :data="residents.rows"
              @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column type="selection" width="55" align="center"></el-table-column>
              <el-table-column
                label="人脸图像"
                align="center"
                width="120">
                <template slot-scope="scope">
                  <img
                    :src="scope.row.faceImage"
                    alt="人脸图像"
                    style="width: 100%; height: auto; display: block;">
                </template>
              </el-table-column>
              <el-table-column label="姓名" align="center" prop="name"></el-table-column>
              <el-table-column label="性别" align="center" prop="gender"></el-table-column>
              <el-table-column label="身份证号" align="center" prop="idNumber"></el-table-column>
              <el-table-column label="电话号码" align="center" prop="phoneNumber"></el-table-column>
              <el-table-column label="居民类型ID" align="center" prop="residentTypeId"></el-table-column>
              <el-table-column label="小区ID" align="center" prop="plotId"></el-table-column>
              <el-table-column label="身份标签" align="center" prop="identityTag">
              </el-table-column>
              <el-table-column label="家庭住址" align="center" prop="householdAddress"></el-table-column>
              <el-table-column label="迁移状态" align="center" prop="migrationStatus"></el-table-column>
              <el-table-column label="最后出现时间" align="center" prop="lastSeen"></el-table-column>


            </el-table>

            <el-button @click="handleConfirm">确定</el-button>
            <!---实有人口分页-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="form.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="residents.total">
            </el-pagination>


            <div class="dia-container" style="width: 300px;height: 450px;outline: 2px solid black;" >
              已选择{{this.selectedResidents.length}}人
              <div class="container">
                <a @click="clearArray"  icon="el-icon-message-solid" class="right-top-button" style="color: #2f54eb">清除</a>
              </div>

              <!-- 盒子内容 -->
              <el-table
                v-loading="loading"
                :data="selectedResidents"
                style="width: 100%">
                <el-table-column
                  label="人脸图像"
                  align="center"
                  width="120">
                  <template slot-scope="scope">
                    <img
                      :src="scope.row.faceImage"
                      alt="人脸图像"
                      style="width: 100%; height: auto; display: block;">
                  </template>
                </el-table-column>
                <el-table-column label="姓名" align="center" prop="name"></el-table-column>
                <el-table-column label="身份证号" align="center" prop="idNumber"></el-table-column>

              </el-table>
            </div>
          </div>
          <div class="card-container">
            <div class="card" v-for="(resident,index) in listResidens" :key="index">
              <div class="card-body">
                <div class="card-info" >
                  <!--                <p><strong>序号:</strong> {{ task.id }}</p>-->
                  <!--                任务名称:-->
                  <span>{{ resident.name }}</span>
                  <p class="inline-field" style="font-size: 10px"><strong>布防人:</strong> {{ resident.defender }}</p>

                  <p style="font-size: 10px">
                    <strong>布控对象:</strong>
                    {{ task.targetObject === 0 ? '库布控' :
                    task.targetObject === 1 ? '人员布控' :
                      task.targetObject === 2 ? '实有人口布控' : '未知类型' }}
                  </p>
                  <p>地块ID: {{ resident.plotName }}</p>
                  <p>身份标签: {{ resident.identityTag }}</p>
                  <p>家庭住址: {{ resident.householdAddress }}</p>
                  <p>迁移状态: {{ resident.migrationStatus }}</p>
                  <p style="font-size: 10px"><strong>最后见到时间:</strong> {{ parseTime(resident.lastSeen, '{y}-{m}-{d}') }}</p>
                  <div v-if="resident.faceImage" class="image">
                    <img :src="resident.faceImage" alt="face" style="width: 100%; height: 200px;">
                  </div>


                </div>
              </div>
            </div>
          </div>
        </div>


      </template>



      <!--                  //添加-->
      <el-button icon="el-icon-plus" @click="addListResidens"  >添加</el-button>
      <!--                    <pagination-->
      <!--                      v-show="total>0"-->
      <!--                      :total="total"-->
      <!--                      :page.sync="queryParams.pageNum"-->
      <!--                      :limit.sync="queryParams.pageSize"-->
      <!--                      @pagination="listResidens"-->
      <!--                    />-->



    </el-dialog>
  </div>
</template>

<script>
import {
  listTask,
  getTask,
  delTask,
  updateTask,
  queryAllByTasksStatusIs4,
  queryAllByTasksStatusIs0,
  queryAllByTasksStatusIs1,
  queryAllByTasksStatusIs2,
  queryAllByTasksStatusIs3,
  updateByStatusIs1, removeTask, updateByStatusIs2, insertTaskWithManyPhoto, updateByStatusTo1
} from "@/api/system/alarm/task";
import {parseTime} from "../../../../utils/smart";
import {listResidents} from "@/api/system/residents";
import ImageUpload from "@/components/ImageUpload/index.vue";


export default {
  name: "Task",

  data() {
    return {
      formLabelWidth: '120px',
      dialogVisible: false,
      dialogFormVisible: false,
      dialogImageUrl: '',
      fileList: [], // 用于 el-upload 组件显示已上传的文件列表
      uploadedImages: [
        //   'http://122.51.25.106:8888/group1/M00/00/54/CgAEB2ajgICACbsfAADwbWOiUKM170.jpg',
        //   'http://122.51.25.106:8888/group1/M00/00/54/CgAEB2ajgICACbsfAADwbWOiUKM170.jpg',
        //   'http://122.51.25.106:8888/group1/M00/00/54/CgAEB2ajgICACbsfAADwbWOiUKM170.jpg',
        //   'http://122.51.25.106:8888/group1/M00/00/54/CgAEB2ajgICACbsfAADwbWOiUKM170.jpg',
        //   'http://122.51.25.106:8888/group1/M00/00/54/CgAEB2ajgICACbsfAADwbWOiUKM170.jpg',
        //   'http://122.51.25.106:8888/group1/M00/00/54/CgAEB2ajgICACbsfAADwbWOiUKM170.jpg',
        //   'http://122.51.25.106:8888/group1/M00/00/54/CgAEB2ajgICACbsfAADwbWOiUKM170.jpg',
        //   'http://122.51.25.106:8888/group1/M00/00/54/CgAEB2ajgICACbsfAADwbWOiUKM170.jpg',
        //   'http://122.51.25.106:8888/group1/M00/00/54/CgAEB2ajgICACbsfAADwbWOiUKM170.jpg',
        //   'http://122.51.25.106:8888/group1/M00/00/54/CgAEB2ajgICACbsfAADwbWOiUKM170.jpg'
        //   // ... 其他图片 URL
      ], // 用于存储已上传图片的 URL 列表
      text: {
        type: "总数",
        default: '1',
      },
      selectedData:[],
      // Slider绑定的值
      value2: 0.0, // 初始值
      iconClass: {
        type: String,
        default: 'el-icon-s-data',
      },
      multipleSelection:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 布控表格数据
      taskList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dialogVisible1:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        taskName: null,
        defenderId: null,
        defenseStatus: null,
        validPeriod: null,
        targetObject: null,
        alarmCount: null,
        creationTime: null,
        lastModified: null,
        operationStatus: null,
        similarity: null,
        pics:[]
      },
      residentForm:{

      },
      task:{
        pics:[]
      },

      residents:[],
      resident:{

      },
      // 表单参数
      form: {
        similarity:0.0,
        residents:{},
        pageNum:1,
        pageSize:3
      },
      formRed: {
        pageNum:1,
        pageSize:3
      },
      selectedResidents:[],
      // 表单校验
      rules: {
        taskName: [
          { required: true, message: "任务名称不能为空", trigger: "blur" }
        ],
        defender: [
          { required: true, message: "布防人不能为空", trigger: "blur" }
        ],
        defenseStatus: [
          { required: true, message: "布防状态，可以是“0-未开始”,“1-执行中”,2-已暂停,3-已撤控 4-已结束不能为空", trigger: "change" }
        ],
        validPeriod: [
          { required: true, message: "布防有效期限不能为空", trigger: "blur" }
        ],
        targetObject: [
          { required: true, message: "布控对象 0-库布控 1-人员布控 2-实有人口布控不能为空", trigger: "blur" }
        ],
      }
    };
  },
  sortItems() {
    // 切换排序方向
    this.sortOrder = this.sortOrder === 1 ? -1 : 1;
  },
  created() {
    this.getList();
    // this.listResidens();
  },
  handleConfirm(){
    this.dialogVisible = false;
  },
  mounted() {
    ImageUpload
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.pageSize = val
      this.openDiaResidents();
    },
    handleConfirm(){
      this.dialogVisible1 = false;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.pageNum = val
      this.openDiaResidents();
    },


    //多图片  添加方法
    handleSuccess1(response,file, fileList){
      console.log(fileList)
      this.form.pics=[]
      for(let i in fileList){
        this.form.pics.push(fileList[i].response.data)
      }
    },
    //多图片 删除 方法
    handleRemove1(file, fileList) {
      console.log(file, fileList);
    },
    //多图片  双击放大方法
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.response.data;
      this.dialogVisible = true;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
      this.multipleSelection = selection;
      console.log(JSON.stringify(this.multipleSelection))

    },
    addListResidens() {
      console.log(JSON.stringify(this.multipleSelection))
      this.selectedResidents = this.multipleSelection
      this.form.resident = JSON.stringify(this.selectedResidents)
      // console.log(JSON.stringify(this.selectedResidents))
    },
    clearArray(){
      this.selectedResidents = [];
    },
    // listResidens(){
    //   this.loading = true;
    //
    // },
    openDiaResidents(){
      this.dialogVisible1 = true;
      listResidents(this.form).then(response => {
        this.selectedResidents = response.data.rows;
        // this.total = response.data.total;
        this.loading = false;
      });
      listResidents(this.formRed).then(response => {
        this.residents = response.data;
        // this.total = response.data.total;
        this.loading = false;
      });
    },
    handleRealPopulationChange() {
      // 当选中“实有人口布控”时，显示对话框
      if (this.form.targetObject === 1) {
        this.dialogVisible1 = true;
        listResidents(this.form).then(response => {
          this.residents = response.data;
          // this.total = response.data.total;
          this.loading = false;
        });
      }
    },

    parseTime,
    handleStartDateChange(value) {
      // 可以在这里添加逻辑，比如当开始日期改变时，确保结束日期不小于开始日期
      if (this.form.lastModified && value && value > this.form.lastModified) {
        this.$message.error('开始日期不能晚于结束日期');
        this.form.lastModified = value; // 或者你可以选择不修改endDate，而是给用户一个提示
      }
    },
    handleEndDateChange(value) {
      // 可以在这里添加逻辑，比如当结束日期改变时，确保它不小于开始日期
      if (this.form.creationTime && value && value < this.form.creationTime) {
        this.$message.error('结束日期不能早于开始日期');
        this.form.creationTime = value; // 或者你可以选择不修改startDate，而是给用户一个提示
      }
    },
    initFileList() {
      this.fileList = this.uploadedImages.map(url => ({
        name: `image-${this.uploadedImages.indexOf(url) + 1}`, // 假设我们根据索引生成文件名
        url: url,
        status: 'success', // 标记为已上传成功
        // 可以添加其他你需要的属性
      }));
    },
    handlePreview(file) {
      // 处理图片预览的逻辑（如果需要）
      console.log('preview', file);
    },
    handleRemove(file, fileList) {
      // 处理文件移除的逻辑
      // 注意：这里的移除可能是从视觉上的移除，而不是从服务器或 uploadedImages 数组中移除
      // 你可能需要根据实际情况调整这个逻辑
      const updatedFileList = fileList.filter(f => f.url !== file.url);
      this.fileList = updatedFileList;
    },
    handleSuccess(response, file) {
      // 当文件上传成功时执行的逻辑
      // 但在这个例子中，我们假设图片已经上传，并且 URL 存储在 uploadedImages 中
      // 因此这个方法可能不会被调用，或者你需要根据实际情况调整它
    },
    handleRemoteTask(id){
      removeTask(id)
        .then(response => {
          // 处理成功响应
          alert('任务撤控成功!', response);
          this.getList();
          // 在这里，您可以根据response的内容更新前端的状态或执行其他操作
        })
        .catch(error => {
          // 处理错误
          alert('撤控任务失败', error);
          // 在这里，您可以处理错误，比如显示错误消息给用户
        });

    },
    handleReStart(id) {
      // 发送请求到后端，使用封装的 updateByStatusIs2 方法
      updateByStatusIs2(id)
        .then(response => {
          // 处理成功响应
          alert('任务已继续', response);
          this.getList();
          // 在这里，您可以根据response的内容更新前端的状态或执行其他操作
        })
        .catch(error => {
          // 处理错误
          alert('任务取消暂停失败', error);
          // 在这里，您可以处理错误，比如显示错误消息给用户
        });
    },
    startTask(id) {
      // 发送请求到后端，使用封装的 updateByStatusIs1 方法
      updateByStatusTo1(id)
        .then(response => {
          // 处理成功响应
          alert('任务已启动', response);
          this.getList();
          // 在这里，您可以根据response的内容更新前端的状态或执行其他操作
        })
        .catch(error => {
          // 处理错误
          alert('暂停启动失败', error);
          // 在这里，您可以处理错误，比如显示错误消息给用户
        });
    },
    handlePause(id) {
      // 发送请求到后端，使用封装的 updateByStatusIs1 方法
      updateByStatusIs1(id)
        .then(response => {
          // 处理成功响应
          alert('任务已暂停', response);
          this.getList();
          // 在这里，您可以根据response的内容更新前端的状态或执行其他操作
        })
        .catch(error => {
          // 处理错误
          alert('暂停任务失败', error);
          // 在这里，您可以处理错误，比如显示错误消息给用户
        });
    },
    queryAllByTasksStatusIs0(){
      queryAllByTasksStatusIs0().then(res=>{
        this.taskList = res.data
      })
    },
    queryAllByTasksStatusIs1(){
      queryAllByTasksStatusIs1().then(res=>{
        this.taskList = res.data
      })
    },
    queryAllByTasksStatusIs2(){
      queryAllByTasksStatusIs2().then(res=>{
        this.taskList = res.data
      })
    },
    queryAllByTasksStatusIs3(){
      queryAllByTasksStatusIs3().then(res=>{
        this.taskList = res.data
      })
    },
    queryAllByTasksStatusIs4(){
      queryAllByTasksStatusIs4().then(res=>{
        this.taskList = res.data
      })
    },
    /** 查询布控
     列表 */
    getList() {
      this.loading = true;
      listTask(this.queryParams).then(response => {
        console.log(response)
        this.taskList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        taskName: null,
        defender: null,
        defenseStatus: null,
        validPeriod: null,
        targetObject: null,
        alarmCount: null,
        creationTime: null,
        lastModified: null,
        operationStatus: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    resetQuery1() {
      alert("别想那么多.没那么多效果!")
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增人员布控";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      // this.form.residentsId = row.residentsId;
      const id = row.id || this.ids
      getTask(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改人员布控";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTask(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            insertTaskWithManyPhoto(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 告警
    handleAlarm() {
      alert("◈『告警已发送,正在授予权限进入管理系统页面』◈");
      this.$router.push({path : '/community/alarm/alarmManage'}); // 跳转到 '/system-alarmManage' 路由
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除布控编号为"' + ids + '"的数据项？').then(function() {
        return delTask(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('alarm/task/export', {
        ...this.queryParams
      }, `task_${new Date().getTime()}.xlsx`)
    }
  }
};


</script>

<style scoped>.custom-icon-text {
  display: flex;
  align-items: center;
}


</style>

<style scoped>.search-form {
  margin-left: 450px; /* 调整这个值来改变距离 */
}
</style>


<style scoped>.add-box {
  margin-left: 200px; /* 调整这个值来改变距离 */
}
</style>


<style scoped>.custom-button {
  border: none; /* 移除边框 */
  background-color: transparent; /* 移除背景色 */
  color: inherit; /* 继承父元素颜色 */
  padding: 0; /* 移除内边距 */
}

.custom-button .el-icon-s-data {
  display: none; /* 隐藏图标 */
}



.custom-button span {
  font-size: 14px; /* 调整字体大小 */
}

.card-body {
  border: 1px solid #000; /* 边框 */
  padding: -10px; /* 内边距，可以根据需要调整 */
  margin: 10px; /* 外边距，减少以让盒子整体更紧凑 */
  /* 如果需要，也可以设置具体的高度和宽度 */
  height: auto; /* 或者设置一个具体的高度值 */
  width: 280px; /* 或者设置一个具体的宽度值 */
  /* 使用max-width和max-height可以限制盒子的最大尺寸 */
  max-width: 300px; /* 限制最大宽度 */
  max-height: 250px; /* 限制最大高度 */
  /* 使用overflow属性处理内容溢出 */
  overflow: auto; /* 当内容超出盒子大小时，显示滚动条 */
}
</style>


<style>.card-info .inline-field {
  display: inline-block; /* 或者使用 'inline'，但 'inline-block' 提供了更多的控制，比如宽度和高度 */
  margin-right: 35px; /* 可选，为字段之间添加一些间距 */
}
h3 {
  font-family: 'Arial', sans-serif;
  font-size: 20px;
  color: #1e1e1e;
  font-weight: bold;
  text-transform: uppercase;
}
.custom-icon-text {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.card-container {
  display: flex;
  flex-wrap: wrap; /* 防止子元素换行 */
  overflow-x: auto; /* 如果子元素超出容器宽度，允许水平滚动 */
}

p7 {
  font-size: 16px;
  display: flex;
  flex-wrap: wrap; /* 防止子元素换行 */
  overflow-x: auto; /* 如果子元素超出容器宽度，允许水平滚动 */
}

.card {
  flex: 0 0 auto; /* 不允许卡片伸缩，保持其原始大小 */
  margin-right: 10px; /* 卡片之间的间距 */
  /* 根据需要设置卡片的宽度、高度等样式 */
}

</style>

<style scoped>
.flex-container {
  display: flex;
  justify-content: space-between; /* 或者使用其他对齐方式 */
  align-items: center; /* 垂直居中对齐 */
  /* 可能需要额外的样式来调整间距或宽度 */
}

.flex-item {
  /* 可能需要调整宽度，或者使用 flex: 1; 来等分空间 */
  flex: 1; /* 让两个表单项等分剩余空间 */
  /* 注意：由于 el-form-item 有内边距和边距，可能需要调整这些值或添加额外的 CSS 来避免重叠 */
}

/* 注意：由于 scoped 样式的作用范围限制，你可能需要在外部样式表中定义这些样式，或者去掉 scoped 属性（如果这不会影响到其他组件的样式） */
</style>
<style scoped>
.photo-wall {
  display: flex; /* 使用 flex 布局 */
  overflow-x: auto; /* 允许水平滚动 */
  white-space: nowrap; /* 防止换行 */
  padding: 10px; /* 内边距，可选 */
  border: 1px solid #ccc; /* 边框，可选 */
  /* 可以根据需要设置更多样式，如高度、宽度等 */
}

.photo-item {
  margin-right: 10px; /* 图片之间的间隔，可选 */
}

.photo {
  width: 100px; /* 设定图片的宽度 */
  height: auto; /* 高度自动调整以保持图片比例 */
  /* 可以根据需要为图片设置更多样式，如边框、阴影等 */
}

.photo-item:last-child {
  margin-right: 0; /* 移除最后一个图片右边的间隔 */
}

.photo {
  width: 150px; /* 设置图片的宽度 */
  height: 150px; /* 设置图片的高度 */
  object-fit: cover; /* 保持图片的宽高比，同时确保图片覆盖整个容器 */
  /* 可以根据需要设置更多样式，如 border-radius, box-shadow 等 */
}
</style>


<style scoped>.resident-list-container {
  /* 为resident-list-container类设置样式 */
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

.card {
  /* 为card类设置样式 */
  margin-bottom: 10px;
  /* 其他样式... */
}

.card-body {
  /* 为card-body类设置样式 */
  padding: 15px;
  /* 其他样式... */
}

/* 其他你需要的样式... */
</style>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px 0;
  cursor: pointer; /* 使鼠标悬停时显示手指形状，表示可点击 */
}

/* 其他你需要的样式 */


.dia-container {
  float: right; /* 盒子将浮动到右侧 */
  width: 500px; /* 或者你需要的任何宽度 */
  /* 其他样式 */
}

/* 清除浮动，如果你需要的话 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>


<style>
.flex-container {
  display: flex; /* 设置为Flex容器 */
  justify-content: space-between; /* 子元素之间的间隔 */
  align-items: center; /* 垂直居中（如果需要） */

}

.dia-container, .dialog-container {
  padding: 10px; /* 可选，给对话框内部添加一些内边距 */
  /* 其他样式 */
}
</style>


<style>
.container {
  position: relative; /* 父容器需要相对定位 */
  top: -18px; /* 距离顶部10px */
  right: -250px; /* 距离右边10px */
  /* 其他样式，如宽度、高度等 */
}

.right-top-button {
//position: absolute; /* 绝对定位 */


  /* 其他样式，如按钮大小、颜色等 */
}
</style>
